<template>
  <div class="event-container">
    <van-sidebar
      :active-key="activeKey"
      @change="onChange"
    >
      <van-sidebar-item title="标签名 1" />
      <van-sidebar-item title="标签名 2" />
      <van-sidebar-item title="标签名 3" />
    </van-sidebar>
  </div>
</template>

<script>
import card from '@/components/card'
import ListScrollView from '@/components/listScrollView/index'
import { getMatchList } from '@/api'

export default {
  components: {
    card,
    ListScrollView
  },

  data () {
    return {
      option1: [
        {
          text: '全部商品',
          value: 0
        },
        {
          text: '新款商品',
          value: 1
        },
        {
          text: '活动商品',
          value: 2
        }
      ],
      title1: '分类1',
      activeKey: 0,
      refreshing: false,
      triggered: false,
      freshing: false,
      quickmenus: [
        {
          options: [
            { text: '全部商品', value: 0 },
            { text: '新款商品', value: 1 },
            { text: '活动商品', value: 2 }
          ],
          value: 0,
          title: '分类'
        },
        {
          options: [
            { text: '默认排序', value: 'a' },
            { text: '好评排序', value: 'b' },
            { text: '销量排序', value: 'c' }
          ],
          value: 'a',
          title: '日期'
        },
        {
          options: [
            { text: '默认排序', value: 'a' },
            { text: '好评排序', value: 'b' },
            { text: '销量排序', value: 'c' }
          ],
          value: 'a',
          title: '地区'
        },
        {
          options: [
            { text: '默认排序', value: 'a' },
            { text: '好评排序', value: 'b' },
            { text: '销量排序', value: 'c' }
          ],
          value: 'a',
          title: '筛选排序'
        }
      ],
      list: [], // 列表数据
      page: 1, // 当前页数
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      }
    }
  },

  created () {
    console.log('event/index created')
  },
  beforeMount () {
    this.getList()
  },
  mounted () {
    // 创建节点选择器
    var query = wx.createSelectorQuery()
    // 选择id
    query.select('#test').boundingClientRect()
    query.exec(function (res) {
      // res就是 所有标签为mjltest的元素的信息 的数组
      console.log('event/index mounted', res)
    })
  },
  methods: {
    onChange (e) {
      console.log(e.mp.detail)
    },
    onOpen () {
      console.log('onOpen ....')
    },
    isOpened () {
      console.log('event/index isOpened')
    },
    lower () {
      console.log('event/index lower')
    },
    scroll () {
      console.log('event/index scroll')
    },
    // 获取数据方法
    getList () {
      console.log('event/index getList')
      const that = this
      that.refreshing = false
      let startTime = new Date()
      let params = {
        page: that.page // 传递页码
      }
      getMatchList(params).then(res => {
        console.log('data', res)
        // 关闭下拉刷新动画
        wx.stopPullDownRefresh()
        // 返回的数据
        const data = res.data

        console.log('data', data)

        let itemCount = data.items.length
        if (itemCount > 0) {
          if (that.page > 1) {
            that.list.push(...data.items)
          } else {
            that.list = data.items
          }
        }
        that.meta = data.meta

        let endtime = new Date()
        let duration = endtime - startTime
        if (duration < 1500) {
          console.log('duration', duration)
          setTimeout(() => {
            that.refreshing = true
          }, 1500 - duration)
        } else {
          that.refreshing = true
        }
        console.log('change refreshing to', that.refreshing)
        that.triggered = false
        that.freshing = false
      })
    },

    onRefresh () {
      // 初始化页码
      this.page = 1
      this.getList()
    },
    // 上拉加载
    onLoad () {
      // 执行上拉执行的功能
      if (this.meta.pageCount <= this.meta.currentPage) {
        console.log('数据加载完了')
      } else {
        // 下一页
        this.page = this.page + 1
        this.getList()
      }
    }
  }
}
</script>

<style lang="less">
page {
  height: 100%;
}
.event-container {
  padding-top: 104px;
  position: relative;
  height: 100%;
}
.van-icon,
.van-icon::before {
  display: block !important;
}
.event-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.van-overlay {
  background: transparent;
}
.quick-search {
}
.event-list {
  height: 100%;
}
.event-list-item {
  &.van-card {
    padding: 15px;
    background: transparent;
  }
  .van-card__img {
    border-radius: 5px;
  }
  .van-card__title {
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
  }
  .van-card__desc {
    font-size: 10px;
  }
  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .van-card--bottom {
    color: #bccce5;
    display: flex;
    align-items: center;
    .van-icon {
      margin-right: 3px;
    }
  }
  .van-card--footer {
    padding: 5px 5px 0 96px;
    text-align: left;
    display: flex;
    align-items: center;
    .van-tag {
      margin-right: 5px;
    }
  }
}

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
